<script lang="ts" setup>
// 定义响应式数据并指定类型
const description: string = "支持多语言，主题功能集成切换等"
const title: string = "Ant Design Vue组件使用演示"

// 如果需要更复杂的类型
interface CardInfo {
  title: string
  description: string
  features?: string[]  // 可选属性
}

// 使用接口类型
const cardData: CardInfo = {
  title,
  description,
  features: [
    "多语言支持",
    "主题切换",
    "组件演示"
  ]
}
</script>

<template>
  <div class="demo-container">
    <!-- 直接使用变量 -->
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
    
    <!-- 使用类型化对象 -->
    <div v-if="cardData.features">
      <h3>功能特性：</h3>
      <ul>
        <li v-for="(feature, index) in cardData.features" :key="index">
          {{ feature }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.demo-container {
  max-width: 800px;
  padding: 20px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 16px;
  color: #1890ff;
}

ul {
  padding-left: 24px;
  margin-top: 8px;
}
</style>
